<template>
	<div>
				<div class="detailtabel">
          <el-button type="primary" @click="toEdit" v-if="!isEdit">编辑</el-button>
          <el-button type="primary" @click="toCancel" v-if="isEdit">取消</el-button>
          <el-button type="primary" @click="toSave" v-if="isEdit">保存</el-button>
					<div class="table_main">
            <el-row>
              <el-col :sm="12" :lg="8">
                <div class="label">队徽</div>
                <div class="content" style="height: 98px" v-if="isEdit">
                  <el-upload
                    class="avatar-uploader"
                    v-model="form.badge"
                    action="https://admin.koudaidj.com/game/alioss/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                  >
                    <img v-if="form.badge" :src="form.badge" class="avatar" style="width: 65px; height: 65px"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <span
                      v-if="form.badge"
                      class=""
                      style="position: absolute;right: -5px;top: -5px"
                      @click="handleRemove()"
                    >
                      <i class="el-icon-error"></i>
                    </span>
                  </el-upload>

                </div>
                <div class="content" style="height: 98px;" v-else>
                  <img style="width: 65px; height: 65px" :src="tableData.badge">
                </div>
              </el-col>
              <el-col :sm="12"  :lg="8">
                <div class="label">编号</div>
                <div class="content">{{tableData.id}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">创建人</div>
                <div class="content">{{tableData.userId}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">队名</div>
                <div class="content" v-if="isEdit">
                  <el-input v-model="form.name" placeholder="请输入队名"></el-input>
                </div>
                <div class="content" v-else>{{tableData.name}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">游戏类型</div>
                <div class="content">{{tableData.gameType == 1? '王者': '吃鸡'}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">战队人数</div>
                <div class="content">{{tableData.number}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">创建时间</div>
                <div class="content">{{tableData.createTime}}</div>
              </el-col>
              <el-col :sm="24" :lg="24">
                <div class="label">战队公告</div>
                <div class="content">{{tableData.notice}}</div>
              </el-col>
              <el-col :sm="24" :lg="24">
                <div class="label">介绍</div>
                <div class="content" v-if="isEdit">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="form.introduce">
                  </el-input>
                </div>
                <div class="content" v-else>{{tableData.introduce}}</div>
              </el-col>


              <el-col :sm="12" :lg="8">
                <div class="label">战绩</div>
                <div class="content">{{tableData.money}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">王者胜利次数</div>
                <div class="content">{{tableData.victory}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">吃鸡胜利次数</div>
                <div class="content">{{tableData.victory}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">获奖率</div>
                <div class="content">{{tableData.awardRate}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">参赛数</div>
                <div class="content">{{tableData.num}}</div>
              </el-col>



              <el-col :sm="24" :lg="24">
                <div class="label">宣传图</div>
                <div class="content" v-if="isEdit">
                  <el-upload
                    class="avatar-uploader"
                    v-model="form.propagandaImg"
                    action="https://admin.koudaidj.com/game/alioss/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess2"
                  >
                    <img v-if="form.propagandaImg" :src="form.propagandaImg" class="avatar" style="height: 200px"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <span
                      v-if="form.propagandaImg"
                      class=""
                      style="position: absolute;right: -5px;top: -5px"
                      @click="handleRemove2()"
                    >
                      <i class="el-icon-error"></i>
                    </span>
                  </el-upload>
                </div>
                <div class="content" v-else>
                  <img style="height: 200px" :src="tableData.propagandaImg">
                </div>
              </el-col>
            </el-row>
					</div>
          <div>
            <h3 class="title">成员列表</h3>
            <el-table
              v-loading="tableDataLoading"
              :data="tableUserData.content"
              row-key="id">
              <el-table-column
                prop="id"
                label="编号"
                width="80">
              </el-table-column>
              <el-table-column prop="headImg" label="头像" width="120">
                <template slot-scope="scope">
                  <div v-if="scope.row.headImg == '' || scope.row.headImg == null">
                    <img src="~@/assets/img/avatar.png" alt="" width="60" height="60">
                  </div>
                  <div v-else>
                    <img :src="scope.row.headImg" alt="" width="60" height="60">
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="nickName" label="昵称"/>
              <el-table-column prop="position" label="职位">
                {{tableData.position == 1? '队长': '队员'}}
              </el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 10px;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="size"
                :current-page="page"
                layout="total,sizes, prev, pager, next"
                :total="tableData.totalElements">
              </el-pagination>
            </div>
          </div>
          <div class="footer">
<!--            <el-button type="primary" size="big" icon="el-icon-close" @click="deletes()" >删除</el-button>-->
<!--            <el-button :disabled="!isAuth('playWithList:removeBanned')" v-else type="primary" size="big" icon="el-icon-check" @click="queueClick()" >解除封禁</el-button>-->
          </div>
				</div>
    <!-- 图片放大 -->
    <el-dialog :visible.sync="dialogFormVisible"  width="50%" style="text-align: center;">
      <img :src="lookimg" alt="" style="max-width:100%;max-height: 100%;">
    </el-dialog>
	</div>
</template>

<script>
	export default {
	    data() {
	        return {
            lookimg: '',
            dialogFormVisible: false,
            reason: '',
				    tableData:{},
            size:5,
            page:1,
            tableDataLoading:false,
            tableUserData:{
              content: []
            },
            form: {
              badge: '',
              name: '',
              introduce: ''
            },
            isEdit: false
	      }
	    },
		computed: {
      srcList(){
        if(this.tableData.propagandaImg){
          return this.tableData.propagandaImg.split(',')
        }
        return []
      }
		},
	    methods: {
        // 图上传
        handleRemove(file) {
          this.form.badge = null;
        },
        handleAvatarSuccess(file) {
          this.form.badge = file.data;
        },
        // 图上传
        handleRemove2(file) {
          this.form.propagandaImg = null;
        },
        handleAvatarSuccess2(file) {
          this.form.propagandaImg = file.data;
        },
        toEdit(){
          this.form = {
            badge: this.tableData.badge,
            name: this.tableData.name,
            introduce: this.tableData.introduce,
            propagandaImg: this.tableData.propagandaImg
          }
          this.isEdit = true
        },
        toCancel(){
          this.isEdit = false
        },
        toSave(){
          this.$http({
            url: this.$http.adornUrl2('/team/update'),
            method: 'post',
            data: this.$http.adornData({
              ...this.form,
              id: this.tableData.id
            })
          }).then(({data}) => {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.isEdit = false
                this.dataSelect()
              }
            })
          })
        },
        handleSizeChange (val) {
          this.size = val
          this.getUserData()
        },
        handleCurrentChange (val) {
          this.page = val
          this.getUserData()
        },
        preview(url){
          this.lookimg = url
          this.dialogFormVisible = true
        },
        // 删除
        deletes(row){
          this.$confirm(`确定删除此条记录?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl2('/bbs/delete'),
              method: 'get',
              params: this.$http.adornParams({
                'id':this.tableData.id,
                'type': 1
              })
            }).then(({data}) => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  // this.dataSelect()
                  this.$router.back()
                }
              })
            })
          }).catch(() => {})
        },
			// 获取数据列表
			dataSelect () {
				let id = this.$route.query.id
				this.$http({
					url: this.$http.adornUrl2(`/team/findById?id=${id}`),
					method: 'get',
					params: this.$http.adornParams({
					})
				}).then(({data}) => {
					if (data.status === 0) {
					let returnData = data.data;
					this.tableData = returnData;
					}
				})
			},
      // 获取成员列表
      getUserData () {
        let id = this.$route.query.id
        let page = this.page - 1
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl2('/team/memberListOfPage'),
          method: 'get',
          params: this.$http.adornParams({
            'page':page,
            'size':this.size,
            'id': id
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          // console.log(data)
          this.tableUserData = data.data || {content: []};
        })
			},
	    },
		activated () {
			this.dataSelect()
			this.getUserData()
		}
	}
</script>

<style scoped="scoped" lang="scss">
  .avatar-uploader{
    position: relative
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
  }
  .avatar {
    /*width: 58px;*/
    /*height: 58px;*/
    display: block;
  }
  .table_main{
    .el-col{
      display: flex;
      .label{
        width: 140px;
        background-color: #fafafa;
        padding: 16px 24px;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }
      .content{
        flex: 1;
        /*height: 60px;*/
        display: flex;
        /*justify-content: center;*/
        align-items: center;
        padding-left: 24px;
        /*padding: 16px 24px;*/
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }
    }

  }
  .footer{
    margin-top: 10px;
    margin-left: 150px;
    .el-button{
      margin-right: 20px;
    }
  }
  .detailtabel .table_main{
    border: 1px solid #e8e8e8;
  }

</style>
